<template>
  <div
    class="floating-panel-overlay"
    v-if="isVisible"
    @click="handleOverlayClick"
  >
    <div class="floating-panel" @click.stop>
      <div class="panel-header">
        <h3 class="panel-title">{{ panelTitle }}</h3>
        <button class="close-button" @click="handleClose">×</button>
      </div>
      <div class="panel-content">
        <!-- 根据当前选中的项目显示不同的内容 -->
        <div v-if="currentItem === '发电机'">
          <!-- 使用发电机参数组件 -->
          <GeneratorParameter />
        </div>

        <div v-else-if="currentItem === '趋势曲线'">
          <trend-chart />
        </div>

        <div v-else-if="currentItem === '参数设定'">
          <!-- 参数设定内容 -->
          <div class="parameter-setting">
            <h4>系统参数设定</h4>
            <div class="setting-form">
              <div
                class="form-group"
                v-for="(setting, index) in settingParams"
                :key="index"
              >
                <label>{{ setting.name }}</label>
                <input
                  type="number"
                  v-model.number="setting.value"
                  :min="setting.min"
                  :max="setting.max"
                  class="setting-input"
                />
                <span class="unit">{{ setting.unit }}</span>
              </div>
              <button class="save-button">保存设置</button>
            </div>
          </div>
        </div>

        <div v-else-if="currentItem === '报警事件'">
          <!-- 使用新的报警事件子组件 -->
          <AlarmEvents />
        </div>
        <div v-else-if="currentItem === '负载调节'">
          <!-- 使用新的负载调节流程组件 -->
          <div class="panel-content-wrapper">
            <div class="left-section">
              <LoadAdjustmentFlowComponent
                :is-overload-active="true"
                @open-generator-panel="handleOpenGeneratorPanel"
                @load-adjusted="handleLoadAdjusted"
                @open-trend-chart="handleOpenTrendChart"
              />
            </div>
            <div class="right-section">
              <div class="troubleshooting-info">
                <h5>排查说明</h5>
                <div class="description-content">
                  <div
                    class="step-description"
                    v-if="activeDescriptionTab === 'overview'"
                  >
                    <p><strong>负载调节流程目的：</strong></p>
                    <p>
                      该流程旨在帮助用户系统性地排查和解决发电机负载异常问题。通过逐步操作，用户可以：
                    </p>
                    <ul>
                      <li>检查机组控制屏，确认负载接入状态</li>
                      <li>根据实际情况调节负载参数</li>
                      <li>监控关键温度参数，确保设备正常运行</li>
                    </ul>
                  </div>
                  <div
                    class="step-description"
                    v-if="activeDescriptionTab === 'step1'"
                  >
                    <p><strong>步骤一：检查机组控制屏</strong></p>
                    <p>在发电机控制面板上检查负载接入情况，确认以下信息：</p>
                    <ul>
                      <li>负载指示灯状态</li>
                      <li>电流、电压读数</li>
                      <li>功率因数显示</li>
                    </ul>
                    <p>此步骤是排查负载问题的基础，确保负载正确接入系统。</p>
                  </div>
                  <div
                    class="step-description"
                    v-if="activeDescriptionTab === 'step2'"
                  >
                    <p><strong>步骤二：调节负载</strong></p>
                    <p>当检测到负载异常时，需要进行负载调节：</p>
                    <ul>
                      <li>系统会自动将负载参数重置为正常值</li>
                      <li>调节过程中系统会实时监控参数变化</li>
                      <li>调节完成后可进行下一步操作</li>
                    </ul>
                    <p>注意：只有完成步骤一才能进行此操作。</p>
                  </div>
                  <div
                    class="step-description"
                    v-if="activeDescriptionTab === 'step3'"
                  >
                    <p><strong>步骤三：检查趋势曲线</strong></p>
                    <p>通过趋势曲线监控发电机关键温度参数：</p>
                    <ul>
                      <li>查看4组发电机定子绕组温度变化</li>
                      <li>分析温度趋势，判断系统稳定性</li>
                      <li>根据温度变化决定是否需要进一步调整</li>
                    </ul>
                    <p>注意：只有完成步骤二才能查看趋势曲线。</p>
                  </div>
                </div>
                <div class="description-tabs">
                  <button
                    :class="[
                      'tab-button',
                      { active: activeDescriptionTab === 'overview' },
                    ]"
                    @click="activeDescriptionTab = 'overview'"
                  >
                    总体说明
                  </button>
                  <button
                    :class="[
                      'tab-button',
                      { active: activeDescriptionTab === 'step1' },
                    ]"
                    @click="activeDescriptionTab = 'step1'"
                  >
                    步骤一说明
                  </button>
                  <button
                    :class="[
                      'tab-button',
                      { active: activeDescriptionTab === 'step2' },
                    ]"
                    @click="activeDescriptionTab = 'step2'"
                  >
                    步骤二说明
                  </button>
                  <button
                    :class="[
                      'tab-button',
                      { active: activeDescriptionTab === 'step3' },
                    ]"
                    @click="activeDescriptionTab = 'step3'"
                  >
                    步骤三说明
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else-if="currentItem === '水流量调节'">
          <!-- 使用水流量调节流程组件 -->
          <div class="panel-content-wrapper">
            <div class="left-section">
              <WaterFlowAdjustmentFlowComponent
                :initial-flow="currentWaterFlow"
                @open-generator-panel="handleOpenGeneratorPanel"
                @flow-adjusted="handleWaterFlowAdjusted"
                @open-trend-chart="handleOpenTrendChart"
              />
            </div>
            <div class="right-section">
              <div class="troubleshooting-info">
                <h5>排查说明</h5>
                <div class="description-content">
                  <div
                    class="step-description"
                    v-if="activeDescriptionTab === 'overview'"
                  >
                    <p><strong>水流量调节流程目的：</strong></p>
                    <p>
                      该流程旨在帮助用户系统性地排查和解决发电机水流量异常问题。通过逐步操作，用户可以：
                    </p>
                    <ul>
                      <li>检查机组控制屏发电机面板，确认水流量情况</li>
                      <li>根据实际情况调节水流量参数</li>
                      <li>监控关键温度参数，确保设备正常运行</li>
                    </ul>
                  </div>
                  <div
                    class="step-description"
                    v-if="activeDescriptionTab === 'step1'"
                  >
                    <p><strong>步骤一：检查机组控制屏发电机面板</strong></p>
                    <p>在发电机控制面板上检查水流量情况，确认以下信息：</p>
                    <ul>
                      <li>水流量显示数值</li>
                      <li>水流状态指示灯</li>
                      <li>相关报警信息</li>
                    </ul>
                    <p>此步骤是排查水流量问题的基础，确保水系统正常运行。</p>
                  </div>
                  <div
                    class="step-description"
                    v-if="activeDescriptionTab === 'step2'"
                  >
                    <p><strong>步骤二：调节水流量</strong></p>
                    <p>当检测到水流量异常时，需要进行水流量调节：</p>
                    <ul>
                      <li>使用滑块调整水流量至合适范围</li>
                      <li>系统会实时监控调节效果</li>
                      <li>调节完成后可进行下一步操作</li>
                    </ul>
                    <p>注意：只有完成步骤一才能进行此操作。</p>
                  </div>
                  <div
                    class="step-description"
                    v-if="activeDescriptionTab === 'step3'"
                  >
                    <p><strong>步骤三：检查趋势曲线</strong></p>
                    <p>通过趋势曲线监控发电机关键温度参数：</p>
                    <ul>
                      <li>查看4组发电机定子绕组温度变化</li>
                      <li>分析温度趋势，判断冷却效果</li>
                      <li>根据温度变化决定是否需要进一步调整水流量</li>
                    </ul>
                    <p>注意：只有完成步骤二才能查看趋势曲线。</p>
                  </div>
                </div>
                <div class="description-tabs">
                  <button
                    :class="[
                      'tab-button',
                      { active: activeDescriptionTab === 'overview' },
                    ]"
                    @click="activeDescriptionTab = 'overview'"
                  >
                    总体说明
                  </button>
                  <button
                    :class="[
                      'tab-button',
                      { active: activeDescriptionTab === 'step1' },
                    ]"
                    @click="activeDescriptionTab = 'step1'"
                  >
                    步骤一说明
                  </button>
                  <button
                    :class="[
                      'tab-button',
                      { active: activeDescriptionTab === 'step2' },
                    ]"
                    @click="activeDescriptionTab = 'step2'"
                  >
                    步骤二说明
                  </button>
                  <button
                    :class="[
                      'tab-button',
                      { active: activeDescriptionTab === 'step3' },
                    ]"
                    @click="activeDescriptionTab = 'step3'"
                  >
                    步骤三说明
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else-if="currentItem === '风道清理'">
          <!-- 使用风道清理流程组件 -->
          <div class="panel-content-wrapper">
            <div class="left-section">
              <AirwayCleanFlowComponent
                :initial-airflows="initialAirflows"
                @open-generator-panel="handleOpenGeneratorPanel"
                @airway-cleaned="handleAirwayCleaned"
                @open-trend-chart="handleOpenTrendChart"
              />
            </div>
            <div class="right-section">
              <div class="troubleshooting-info">
                <h5>排查说明</h5>
                <div class="description-content">
                  <div
                    class="step-description"
                    v-if="activeDescriptionTab === 'overview'"
                  >
                    <p><strong>风道清理流程目的：</strong></p>
                    <p>
                      该流程旨在帮助用户系统性地排查和解决发电机风冷流量异常问题。通过逐步操作，用户可以：
                    </p>
                    <ul>
                      <li>检查机组控制屏发电机面板，确认风冷流量情况</li>
                      <li>执行风道清理操作，恢复正常风量</li>
                      <li>监控关键温度参数，确保设备正常运行</li>
                    </ul>
                  </div>
                  <div
                    class="step-description"
                    v-if="activeDescriptionTab === 'step1'"
                  >
                    <p><strong>步骤一：检查机组控制屏发电机面板</strong></p>
                    <p>在发电机控制面板上检查风冷流量情况，确认以下信息：</p>
                    <ul>
                      <li>四路风量显示数值</li>
                      <li>风冷系统运行状态</li>
                      <li>相关报警信息</li>
                    </ul>
                    <p>此步骤是排查风冷问题的基础，确保风冷系统正常运行。</p>
                  </div>
                  <div
                    class="step-description"
                    v-if="activeDescriptionTab === 'step2'"
                  >
                    <p><strong>步骤二：清理风道</strong></p>
                    <p>当检测到风道需要清理时，执行清理操作：</p>
                    <ul>
                      <li>系统会自动将四路风量参数重置为正常值(2.5)</li>
                      <li>清理过程中系统会实时监控参数变化</li>
                      <li>清理完成后可进行下一步操作</li>
                    </ul>
                    <p>注意：只有完成步骤一才能进行此操作。</p>
                  </div>
                  <div
                    class="step-description"
                    v-if="activeDescriptionTab === 'step3'"
                  >
                    <p><strong>步骤三：检查趋势曲线</strong></p>
                    <p>通过趋势曲线监控发电机关键温度参数：</p>
                    <ul>
                      <li>查看4组发电机定子绕组温度变化</li>
                      <li>分析温度趋势，判断冷却效果</li>
                      <li>根据温度变化决定是否需要进一步调整</li>
                    </ul>
                    <p>注意：只有完成步骤二才能查看趋势曲线。</p>
                  </div>
                </div>
                <div class="description-tabs">
                  <button
                    :class="[
                      'tab-button',
                      { active: activeDescriptionTab === 'overview' },
                    ]"
                    @click="activeDescriptionTab = 'overview'"
                  >
                    总体说明
                  </button>
                  <button
                    :class="[
                      'tab-button',
                      { active: activeDescriptionTab === 'step1' },
                    ]"
                    @click="activeDescriptionTab = 'step1'"
                  >
                    步骤一说明
                  </button>
                  <button
                    :class="[
                      'tab-button',
                      { active: activeDescriptionTab === 'step2' },
                    ]"
                    @click="activeDescriptionTab = 'step2'"
                  >
                    步骤二说明
                  </button>
                  <button
                    :class="[
                      'tab-button',
                      { active: activeDescriptionTab === 'step3' },
                    ]"
                    @click="activeDescriptionTab = 'step3'"
                  >
                    步骤三说明
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else-if="currentItem === 'PTC重新接线'">
          <!-- 使用PTC重新接线组件 -->
          <PTCRewireComponent
            :current-status="ptcCurrentStatus"
            @rewired="handlePTCRewired"
            @cancel="handlePTCCancel"
            @open-generator-panel="handleOpenGeneratorPanel"
            @open-trend-chart="handleOpenTrendChart"
          />
        </div>
        <div v-else-if="currentItem === 'PTC更换'">
          <!-- 使用PTC更换组件 -->
          <PTCRecoveryComponent
            :current-status="ptcDamageStatus"
            @recovered="handlePTCRecovered"
            @cancel="handlePTCRecoveryCancel"
            @open-generator-panel="handleOpenGeneratorPanel"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

// 描述区域当前选中的标签页
const activeDescriptionTab = ref("overview");
import GeneratorParameter from "./GeneratorParameter.vue";
import TrendChart from "./TrendChart.vue";
import AlarmEvents from "./AlarmEvents.vue";
import LoadAdjustmentFlowComponent from "./LoadAdjustmentFlowComponent.vue";
import WaterFlowAdjustmentComponent from "./WaterFlowAdjustmentComponent.vue";
import WaterFlowAdjustmentFlowComponent from "./WaterFlowAdjustmentFlowComponent.vue";
import AirwayCleanComponent from "./AirwayCleanComponent.vue";
import AirwayCleanFlowComponent from "./AirwayCleanFlowComponent.vue";
import PTCRewireComponent from "./PTCRewireComponent.vue";
import PTCRecoveryComponent from "./PTCRecoveryComponent.vue";

// 定义组件props
const props = defineProps({
  isVisible: {
    type: Boolean,
    default: false,
  },
  currentItem: {
    type: String,
    default: "",
  },
  currentWaterFlow: {
    type: Number,
    default: 50,
  },
  // 风道清理相关的props
  initialAirflows: {
    type: Object,
    default: () => ({
      "2_38_0_0": 2.5,
      "2_39_0_0": 2.5,
      "2_40_0_0": 2.5,
      "2_36_0_0": 2.5,
    }),
  },
  // PTC接触不良相关的props
  ptcCurrentStatus: {
    type: Number,
    default: 1, // 1表示正常状态，0表示故障状态
  },
  // PTC损坏相关的props
  ptcDamageStatus: {
    type: Number,
    default: 1, // 1表示正常状态，0表示损坏状态
  },
});

// 定义组件事件
const emit = defineEmits([
  "close",
  "flow-updated",
  "airway-cleaned",
  "ptc-rewired",
  "ptc-recovered",
  "load-adjusted",
  "open-generator-panel",
  "open-trend-chart",
]);

// 计算面板标题
const panelTitle = computed(() => {
  const titles = {
    发电机: "发电机监测",
    趋势曲线: "运行趋势分析",
    参数设定: "系统参数配置",
    报警事件: "故障报警记录",
    负载调节: "负载调节控制",
    水流量调节: "水流量调节控制",
    风道清理: "风道清理操作",
    PTC重新接线: "PTC系统重新接线",
    PTC更换: "PTC系统更换备用组件",
  };
  return titles[props.currentItem] || props.currentItem;
});

// 发电机参数现在通过GeneratorParameter组件管理

// 模拟参数设定数据
const settingParams = ref([
  { name: "转速设定值", value: 1500, min: 1000, max: 1800, unit: "rpm" },
  { name: "电压设定值", value: 400, min: 380, max: 420, unit: "V" },
  { name: "过流保护值", value: 150, min: 100, max: 200, unit: "A" },
  { name: "温度报警值", value: 95, min: 80, max: 110, unit: "°C" },
]);

// 报警事件数据现在由AlarmEvents组件通过store管理

// 处理关闭按钮点击
const handleClose = () => {
  emit("close");
};

// 处理遮罩层点击
const handleOverlayClick = () => {
  emit("close");
};

// 处理负载调节完成事件
const handleLoadAdjusted = () => {
  // 负载调节完成后可以执行一些操作
  // 例如关闭面板或更新状态
  console.log("负载调节完成");
  emit("load-adjusted");
};

// 处理打开发电机面板事件
const handleOpenGeneratorPanel = () => {
  // 通过emit通知父组件打开发电机面板
  emit("open-generator-panel", "发电机");
};

// 处理打开趋势曲线事件
const handleOpenTrendChart = () => {
  // 通过emit通知父组件打开趋势曲线
  emit("open-trend-chart", "趋势曲线");
};

// 处理水流量调节完成事件
const handleWaterFlowAdjusted = (newFlow) => {
  // 水流量调节完成后可以执行一些操作
  console.log("水流量调节完成，新值为:", newFlow);
  // 触发flow-updated事件，通知父组件水流量已更新
  emit("flow-updated", newFlow);
};

// 处理风道清理完成事件
const handleAirwayCleaned = (newAirflows) => {
  // 风道清理完成后可以执行一些操作
  console.log("风道清理完成，新的风量参数为:", newAirflows);
  // 触发airway-cleaned事件，通知父组件风道已清理
  emit("airway-cleaned", newAirflows);
};

// 处理PTC重新接线完成事件
const handlePTCRewired = (newStatus) => {
  // PTC重新接线完成后可以执行一些操作
  console.log("PTC重新接线完成，新状态为:", newStatus);
  // 触发ptc-rewired事件，通知父组件PTC状态已更新
  emit("ptc-rewired", newStatus);
};

// 处理PTC重新接线取消事件
const handlePTCCancel = () => {
  console.log("PTC重新接线操作已取消");
  // 可以选择关闭面板或执行其他操作
  emit("close");
};

// 处理PTC修复完成事件
const handlePTCRecovered = (newStatus) => {
  // PTC修复完成后可以执行一些操作
  console.log("PTC修复完成，新状态为:", newStatus);
  // 触发ptc-recovered事件，通知父组件PTC状态已更新
  emit("ptc-recovered", newStatus);
};

// 处理PTC修复取消事件
const handlePTCRecoveryCancel = () => {
  console.log("PTC修复操作已取消");
  // 可以选择关闭面板或执行其他操作
  emit("close");
};
</script>

<style scoped>
.floating-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100; /* 确保在iframe上方 */
  backdrop-filter: blur(2px);
}

.floating-panel {
  background-color: #2c3e50;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  color: #ecf0f1;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 2px solid #34495e;
  background-color: #34495e;
  border-radius: 8px 8px 0 0;
}

.panel-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #3498db;
}

.close-button {
  background: none;
  border: none;
  color: #ecf0f1;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.close-button:hover {
  background-color: #e74c3c;
}

.panel-content {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.panel-content-wrapper {
  display: flex;
  gap: 20px;
  height: 100%;
}

.left-section {
  flex: 0 0 350px;
}

.right-section {
  flex: 1;
  background: #34495e;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #95a5a6;
}

/* 排查说明区域样式 */
.troubleshooting-info {
  width: 100%;
  background: #34495e;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.troubleshooting-info h5 {
  margin: 0;
  color: #3498db;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid #2c3e50;
  padding-bottom: 10px;
}

.description-content {
  flex: 1;
  background: #2c3e50;
  border-radius: 6px;
  padding: 16px;
  min-height: 200px;
  overflow-y: auto;
}

.step-description p {
  margin-bottom: 12px;
  line-height: 1.6;
  color: #bdc3c7;
}

.step-description ul {
  margin-bottom: 12px;
  padding-left: 20px;
  color: #bdc3c7;
}

.step-description li {
  margin-bottom: 6px;
}

.step-description strong {
  color: #3498db;
}

.description-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tab-button {
  background: #2c3e50;
  color: #bdc3c7;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 12px;
}

.tab-button:hover {
  background: #3c566a;
}

.tab-button.active {
  background: #3498db;
  color: white;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .panel-content-wrapper {
    flex-direction: column;
  }

  .left-section {
    flex: none;
    width: 100%;
  }
}

/* 发电机监控样式 */
.generator-monitoring h4,
.trend-chart h4,
.parameter-setting h4,
.alarm-events h4 {
  color: #3498db;
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #34495e;
}

.monitoring-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.monitoring-item {
  background-color: #34495e;
  padding: 16px;
  border-radius: 6px;
  text-align: center;
  transition: transform 0.2s;
}

.monitoring-item:hover {
  transform: translateY(-2px);
  background-color: #3c566a;
}

.param-name {
  font-size: 14px;
  color: #95a5a6;
  margin-bottom: 8px;
}

.param-value {
  font-size: 20px;
  font-weight: 600;
  color: #e67e22;
}

/* 趋势曲线样式 */
.chart-placeholder {
  background-color: #34495e;
  border-radius: 6px;
  padding: 40px;
  text-align: center;
  color: #95a5a6;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 参数设定样式 */
.setting-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #34495e;
  padding: 12px;
  border-radius: 6px;
}

.form-group label {
  flex: 1;
  font-size: 14px;
  color: #ecf0f1;
}

.setting-input {
  flex: 0 0 120px;
  padding: 8px 12px;
  border: 1px solid #7f8c8d;
  border-radius: 4px;
  background-color: #2c3e50;
  color: #ecf0f1;
  font-size: 14px;
}

.setting-input:focus {
  outline: none;
  border-color: #3498db;
}

.unit {
  font-size: 12px;
  color: #95a5a6;
  min-width: 40px;
}

.save-button {
  background-color: #27ae60;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
  align-self: flex-end;
}

.save-button:hover {
  background-color: #2ecc71;
}

/* 报警事件样式 */
.alarm-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.alarm-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: #34495e;
  padding: 12px 16px;
  border-radius: 6px;
  border-left: 4px solid #e74c3c;
}

.alarm-time {
  font-size: 12px;
  color: #95a5a6;
  min-width: 150px;
}

.alarm-level {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
  font-weight: 600;
  min-width: 60px;
  text-align: center;
}

.level-error {
  background-color: #e74c3c;
  color: white;
}

.level-warning {
  background-color: #f39c12;
  color: white;
}

.level-info {
  background-color: #3498db;
  color: white;
}

.alarm-message {
  flex: 1;
  font-size: 14px;
  color: #ecf0f1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .floating-panel {
    width: 95%;
    max-height: 90vh;
  }

  .monitoring-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-group {
    flex-direction: column;
    align-items: stretch;
  }

  .setting-input {
    flex: none;
  }
}
</style>